<template>
  <div class="creator-support">
    <div class="page-header">
      <h1 class="page-title">创作者支持中心</h1>
      <p class="page-desc">分享您的知识，成为我们平台的创作者</p>
    </div>

    <div class="banner-section">
      <el-carousel height="400px">
        <el-carousel-item v-for="(banner, index) in banners" :key="index">
          <div class="banner-content" :style="{ backgroundImage: `url(${banner.image})` }">
            <div class="banner-text">
              <h2>{{ banner.title }}</h2>
              <p>{{ banner.description }}</p>
              <el-button type="primary" size="medium" @click="navigateTo(banner.link)">
                {{ banner.buttonText }}
              </el-button>
            </div>
          </div>
        </el-carousel-item>
      </el-carousel>
    </div>

    <div class="features-section">
      <h2 class="section-title">为什么成为创作者</h2>
      <el-row :gutter="30">
        <el-col :xs="24" :sm="12" :md="8" v-for="(feature, index) in features" :key="index">
          <div class="feature-card">
            <div class="feature-icon">
              <i :class="feature.icon"></i>
            </div>
            <h3 class="feature-title">{{ feature.title }}</h3>
            <p class="feature-desc">{{ feature.description }}</p>
          </div>
        </el-col>
      </el-row>
    </div>

    <div class="steps-section">
      <h2 class="section-title">如何成为创作者</h2>
      <el-steps :active="1" finish-status="success" simple>
        <el-step v-for="(step, index) in steps" :key="index" :title="step.title" :description="step.description"></el-step>
      </el-steps>
      <div class="steps-action">
        <el-button type="primary" @click="$router.push('/creator-support/apply')">立即申请</el-button>
      </div>
    </div>

    <div class="resources-section">
      <div class="section-header">
        <h2 class="section-title">创作者资源</h2>
        <router-link to="/creator-support/resources" class="view-all">查看全部</router-link>
      </div>
      <el-row :gutter="20">
        <el-col :xs="24" :sm="12" :md="8" :lg="6" v-for="(resource, index) in resources" :key="index">
          <div class="resource-card">
            <div class="resource-icon">
              <i :class="getResourceIcon(resource.type)"></i>
            </div>
            <div class="resource-content">
              <h3 class="resource-title">{{ resource.title }}</h3>
              <p class="resource-desc">{{ resource.description }}</p>
              <el-button type="text" @click="viewResource(resource)">
                查看资源 <i class="el-icon-arrow-right"></i>
              </el-button>
            </div>
          </div>
        </el-col>
      </el-row>
    </div>

    <div class="faq-section">
      <h2 class="section-title">常见问题</h2>
      <el-collapse accordion>
        <el-collapse-item v-for="(faq, index) in faqs" :key="index" :title="faq.question" :name="index">
          <div v-html="faq.answer"></div>
        </el-collapse-item>
      </el-collapse>
    </div>

    <div class="contact-section">
      <h2 class="section-title">联系我们</h2>
      <p class="contact-desc">如果您有任何关于创作者计划的问题，请随时联系我们</p>
      <div class="contact-info">
        <div class="contact-item">
          <i class="el-icon-message"></i>
          <span>creator-support@example.com</span>
        </div>
        <div class="contact-item">
          <i class="el-icon-phone-outline"></i>
          <span>400-123-4567</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import api from '@/api'

export default {
  name: 'CreatorSupport',
  data() {
    return {
      loading: false,
      banners: [
        {
          title: '分享您的专业知识',
          description: '帮助学生学习并获得收益',
          image: 'https://via.placeholder.com/1200x400',
          link: '/creator-support/apply',
          buttonText: '立即申请'
        },
        {
          title: '创作者工具包',
          description: '我们提供全方位的创作支持',
          image: 'https://via.placeholder.com/1200x400',
          link: '/creator-support/resources',
          buttonText: '查看资源'
        },
        {
          title: '加入我们的创作者社区',
          description: '与其他专业人士交流合作',
          image: 'https://via.placeholder.com/1200x400',
          link: '/creator-support/apply',
          buttonText: '了解更多'
        }
      ],
      features: [
        {
          title: '分享收益',
          description: '根据您的内容受欢迎程度获得收益分成',
          icon: 'el-icon-money'
        },
        {
          title: '扩大影响力',
          description: '接触更多的学生和教育工作者',
          icon: 'el-icon-share'
        },
        {
          title: '专业成长',
          description: '提升您的教学技能和专业知识',
          icon: 'el-icon-trophy'
        },
        {
          title: '灵活创作',
          description: '按照自己的节奏和专长创建内容',
          icon: 'el-icon-time'
        },
        {
          title: '技术支持',
          description: '获得专业的创作工具和技术支持',
          icon: 'el-icon-cpu'
        },
        {
          title: '社区交流',
          description: '与志同道合的创作者交流合作',
          icon: 'el-icon-connection'
        }
      ],
      steps: [
        {
          title: '提交申请',
          description: '填写申请表并提交您的资质'
        },
        {
          title: '资质审核',
          description: '我们将在3-5个工作日内审核您的申请'
        },
        {
          title: '创作培训',
          description: '参加创作者培训，了解平台规则和工具'
        },
        {
          title: '开始创作',
          description: '使用创作者工具开始创建您的内容'
        }
      ],
      resources: [],
      faqs: []
    }
  },
  created() {
    this.fetchResources()
    this.fetchFAQs()
  },
  methods: {
    async fetchResources() {
      try {
        const response = await api.creator.getCreatorResources({ limit: 4 })
        this.resources = response.data
      } catch (error) {
        console.error('获取创作者资源失败:', error)
      }
    },
    async fetchFAQs() {
      try {
        const response = await api.creator.getCreatorFAQs()
        this.faqs = response.data
      } catch (error) {
        console.error('获取常见问题失败:', error)
      }
    },
    navigateTo(link) {
      this.$router.push(link)
    },
    viewResource(resource) {
      window.open(resource.url, '_blank')
    },
    getResourceIcon(type) {
      const iconMap = {
        guide: 'el-icon-document',
        video: 'el-icon-video-camera',
        tool: 'el-icon-s-tools',
        template: 'el-icon-document-copy'
      }
      return iconMap[type] || 'el-icon-document'
    }
  }
}
</script>

<style lang="scss" scoped>
.creator-support {
  padding: 20px;

  .page-header {
    text-align: center;
    margin-bottom: 30px;

    .page-title {
      font-size: 32px;
      font-weight: bold;
      margin-bottom: 10px;
      color: #303133;
    }

    .page-desc {
      font-size: 16px;
      color: #606266;
    }
  }

  .banner-section {
    margin-bottom: 40px;

    .banner-content {
      height: 100%;
      background-size: cover;
      background-position: center;
      position: relative;
      
      &::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: rgba(0, 0, 0, 0.4);
      }
    }

    .banner-text {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      text-align: center;
      color: #fff;
      width: 80%;
      max-width: 800px;

      h2 {
        font-size: 36px;
        font-weight: bold;
        margin-bottom: 15px;
      }

      p {
        font-size: 18px;
        margin-bottom: 20px;
      }
    }
  }

  .section-title {
    font-size: 24px;
    font-weight: bold;
    margin-bottom: 25px;
    text-align: center;
    color: #303133;
  }

  .features-section {
    margin-bottom: 40px;

    .feature-card {
      background-color: #fff;
      border-radius: 8px;
      padding: 30px 20px;
      text-align: center;
      box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
      margin-bottom: 20px;
      height: 100%;
      transition: transform 0.3s;

      &:hover {
        transform: translateY(-5px);
      }

      .feature-icon {
        font-size: 48px;
        color: #409EFF;
        margin-bottom: 20px;
      }

      .feature-title {
        font-size: 18px;
        font-weight: bold;
        margin-bottom: 15px;
        color: #303133;
      }

      .feature-desc {
        color: #606266;
        line-height: 1.6;
      }
    }
  }

  .steps-section {
    margin-bottom: 40px;
    background-color: #f5f7fa;
    padding: 30px;
    border-radius: 8px;

    .steps-action {
      text-align: center;
      margin-top: 30px;
    }
  }

  .resources-section {
    margin-bottom: 40px;

    .section-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 20px;

      .view-all {
        color: #409EFF;
        text-decoration: none;

        &:hover {
          text-decoration: underline;
        }
      }
    }

    .resource-card {
      background-color: #fff;
      border-radius: 8px;
      padding: 20px;
      box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
      margin-bottom: 20px;
      height: 100%;
      display: flex;
      flex-direction: column;

      .resource-icon {
        font-size: 36px;
        color: #409EFF;
        margin-bottom: 15px;
      }

      .resource-content {
        flex: 1;
        display: flex;
        flex-direction: column;

        .resource-title {
          font-size: 16px;
          font-weight: bold;
          margin-bottom: 10px;
          color: #303133;
        }

        .resource-desc {
          color: #606266;
          line-height: 1.6;
          margin-bottom: 15px;
          flex: 1;
        }
      }
    }
  }

  .faq-section {
    margin-bottom: 40px;
    background-color: #fff;
    border-radius: 8px;
    padding: 30px;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  }

  .contact-section {
    text-align: center;
    padding: 40px 20px;
    background-color: #f5f7fa;
    border-radius: 8px;

    .contact-desc {
      color: #606266;
      margin-bottom: 20px;
    }

    .contact-info {
      display: flex;
      justify-content: center;
      flex-wrap: wrap;

      .contact-item {
        display: flex;
        align-items: center;
        margin: 0 15px;
        color: #303133;

        i {
          font-size: 20px;
          margin-right: 8px;
          color: #409EFF;
        }
      }
    }
  }
}

@media (max-width: 768px) {
  .creator-support {
    .banner-section {
      .banner-text {
        h2 {
          font-size: 28px;
        }

        p {
          font-size: 16px;
        }
      }
    }

    .contact-section {
      .contact-info {
        flex-direction: column;

        .contact-item {
          margin: 10px 0;
        }
      }
    }
  }
}
</style> 